<template>
  <div class="company-card-skeleton">
    <!-- Logo skeleton -->
    <div class="company-card-skeleton__logo">
      <SkeletonLoader width="120px" height="120px" />
    </div>

    <!-- Content skeleton -->
    <div class="company-card-skeleton__content">
      <SkeletonLoader width="80%" height="24px" />
      <SkeletonLoader width="60%" height="16px" />
      <SkeletonLoader width="100%" height="14px" />
      <SkeletonLoader width="100%" height="14px" />
      <SkeletonLoader width="70%" height="14px" />
    </div>
  </div>
</template>

<script setup>
import SkeletonLoader from '../common/SkeletonLoader.vue';
</script>

<style scoped>
.company-card-skeleton {
  background: rgba(13, 31, 60, 0.6);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(77, 208, 225, 0.2);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  box-shadow: 0 0 15px rgba(77, 208, 225, 0.15);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.company-card-skeleton__logo {
  width: 120px;
  height: 120px;
  margin: 0 auto;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.company-card-skeleton__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  text-align: center;
}

@media (max-width: 768px) {
  .company-card-skeleton {
    padding: var(--spacing-lg);
  }

  .company-card-skeleton__logo {
    width: 100px;
    height: 100px;
  }
}
</style>
